<template>
  <div class="net-plan-box" @dragover="allowDrop">
    <!-- 左边工具栏 -->
    <div class="left-tool-bar">
      <p>资源库</p>
      <div
        v-for="item in toolData"
        class="tool-box"
        draggable
        @dragstart="toolDragStart(item.type, $event)"
        @dragend="toolDragEnd"
        id="data-center"
        :key="item.type"
      >
      <!-- @drop="dropMove" -->
        <div style="background:skyblue;width: 20px;height: 20px;"></div>
        <span class="tool-name">{{$store.state.language=='zh' ? item.ch_title : item.en_title}}</span>
      </div>
    </div>

    <!-- 中间画布 -->
    <div class="center-graph">
      <div class="drop-area" @drop="handleDrop" @click="cancelAllSelected">
        <div
          v-for="(item,index) in topologyData" :key="'dataCenter'+index"
          :class="item.type == 'datacenter' ? 'clearfix' : ''"
          @click="selectDataCenter($event)"
        >
          <div
            class="data-center-box" 
            v-if="item.type === 'datacenter'"
          >
            <div 
              class="panel-head"
              @mouseenter="mouseEnterTitle($event)"
              @mouseleave="mouseLeaveTitle($event)"
            >
              <span class="panel-head-title" :title="item.name">{{item.name}}</span>
              <span class="operate-icon-box">
                <!-- <i class="icon icon-edit16f operate-icon" @click="openEditInput($event)"></i> -->
							  <Iconfont class="icon operate-icon" type="icon-edit16f" @click="openEditInput($event)"></Iconfont>
                <!-- <i class="icon icon-delete16f operate-icon" @click="deleteBox(item, $event)"></i> -->
							  <Iconfont class="icon operate-icon" type="icon-delete16f" @click="deleteBox(item, $event)"></Iconfont>
              </span>
            </div>
            <div class="data-center-name-input">
              <a-input :defaultValue="item.name">
                <a-tooltip slot="suffix" title="请输入合法的名称（ 1 ~ 128 个字符，支持大小写字母、数字、句点（.）、下划线（_）和连字符（-））">
                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
                </a-tooltip>
              </a-input>
              <a-icon type="check-square" theme="filled" class="input-operate-icon theme-color" @click="handleEditInputName($event)"/>
              <a-icon type="close-square" theme="filled" class="input-operate-icon" @click="cancelEditInputName($event)"/>
            </div>
            <!-- 机房 -->
            <div class="panel-body">
              <div
                v-for="(roomItem,index2) in item.children"
                class="room-container"
                draggable
                :key="'room'+index2"
                @dragstart="roomDragStart(roomItem, $event)"
              >
                <div class="room">
                  <div 
                    class="panel-head"
                    @mouseenter="mouseEnterTitle($event)"
                    @mouseleave="mouseLeaveTitle($event)"
                  >
                    <span class="panel-head-title" :title="roomItem.name">{{roomItem.name}}</span>
                    <span class="operate-icon-box">
                      <!-- <i class="icon icon-edit16f operate-icon" @click="openEditInput($event)"></i> -->
							        <Iconfont class="icon operate-icon" type="icon-edit16f" @click="openEditInput($event)"></Iconfont>
                      <!-- <i class="icon icon-delete16f operate-icon" @click="deleteBox(roomItem, $event)"></i> -->
							        <Iconfont class="icon operate-icon" type="icon-delete16f" @click="deleteBox(roomItem, $event)"></Iconfont>
                    </span>
                  </div>
                  <div class="data-center-name-input">
                    <a-input :defaultValue="roomItem.name">
                      <a-tooltip slot="suffix" title="请输入合法的名称（ 1 ~ 128 个字符，支持大小写字母、数字、句点（.）、下划线（_）和连字符（-））">
                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
                      </a-tooltip>
                    </a-input>
                    <a-icon type="check-square" theme="filled" class="input-operate-icon theme-color" @click="handleEditInputName($event)"/>
                    <a-icon type="close-square" theme="filled" class="input-operate-icon" @click="cancelEditInputName($event)"/>
                  </div>
                  <!-- 机架 -->
                  <div class="panel-body">
                    <div
                      v-for="(rackItem,index3) in roomItem.children"
                      class="rack-container"
                      draggable 
                      :key="'rack'+index3"
                      @dragstart="rackDragStart(rackItem, $event)"
                    >
                      <div class="rack">
                        <div 
                          class="panel-head"
                          @mouseenter="mouseEnterTitle($event)"
                          @mouseleave="mouseLeaveTitle($event)"
                        >
                          <span class="panel-head-title" :title="rackItem.name">{{rackItem.name}}</span>
                          <span class="operate-icon-box">
                            <!-- <i class="icon icon-edit16f operate-icon" @click="openEditInput($event)"></i> -->
                            <Iconfont class="icon operate-icon" type="icon-edit16f" @click="openEditInput($event)"></Iconfont>
                            <!-- <i class="icon icon-delete16f operate-icon" @click="deleteBox(rackItem, $event)"></i> -->

                            <Iconfont class="icon operate-icon" type="icon-delete16f" @click="deleteBox(rackItem, $event)"></Iconfont>
                          </span>
                        </div>
                        <div class="data-center-name-input">
                          <a-input :defaultValue="rackItem.name">
                            <a-tooltip slot="suffix" title="请输入合法的名称（ 1 ~ 128 个字符，支持大小写字母、数字、句点（.）、下划线（_）和连字符（-））">
                              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
                            </a-tooltip>
                          </a-input>
                          <a-icon type="check-square" theme="filled" class="input-operate-icon theme-color" @click="handleEditInputName($event)"/>
                          <a-icon type="close-square" theme="filled" class="input-operate-icon" @click="cancelEditInputName($event)"/>
                        </div>
                        <div class="panel-body">
                          <div
                            v-for="(nodeItem,index4) in rackItem.children"
                            class="machine" 
                            draggable
                            :key="'node'+index4"
                            @dragstart="nodeDragStart(nodeItem, $event)"
                          >
                            <p class="host-name">
                              <span class="green-circle"></span>
                              <span class="node-name" :title="nodeItem.name">{{nodeItem.name}}</span>
                            </p>
                            <p class="host-ip" :title="nodeItem.ip">
                              <span class="node-ip">{{nodeItem.ip}}</span>
                            </p>
                          </div>
                          <!-- 机器虚线提示区域 -->
                          <div 
                            v-if="nowPlacementRackDom && currentTool=='node' 
                            && nowPlacementRackDom.textContent.indexOf(rackItem.name) !== -1
                            && nowPlacementRackDom.textContent != nowDragRackDom.textContent" 
                            class="dashed-machine"></div>
                        </div>
                      </div>
                    </div>
                    <!-- 虚线提示的机架区域 -->
                    <div
                      v-if="nowPlacementRoom && currentTool=='rack' 
                      && nowPlacementRoom.textContent.indexOf(roomItem.name) !== -1
                      && nowPlacementRoom.textContent != nowDragRoomDom.textContent"
                      class="rack-container"
                    >
                      <div class="dashed-rack"></div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 虚线提示的机房 -->
              <div
                v-if="
                nowPlacementDataCenter && currentTool=='machine-room' 
                && nowPlacementDataCenter.textContent.indexOf(item.name) !== -1
                "
                class="room-container" 
              >
                <div class="dashed-room"></div>
              </div>
            </div>
          </div>
          <template v-else-if="item.type === 'room'">
            <RoomBox
              :roomItem="item"
              :nowPlacementRoom="nowPlacementRoom"
              :nowPlacementRackDom="nowPlacementRackDom"
              :currentTool="currentTool"
              :nowDragRackDom="nowDragRackDom"
              :nowDragRoomDom="nowDragRoomDom"
              @mouseEnterTitle="mouseEnterTitle"
              @mouseLeaveTitle="mouseLeaveTitle"
              @openEditInput="openEditInput"
              @deleteBox="deleteBox"
              @handleEditInputName="handleEditInputName"
              @cancelEditInputName="cancelEditInputName"
              @nodeDragStart="nodeDragStart"
              @rackDragStart="rackDragStart"
            />
          </template>
          <template v-else-if="item.type === 'rack'">
            <RackBox 
              :rackItem="item"
              :nowPlacementRackDom="nowPlacementRackDom"
              :currentTool="currentTool"
              :nowDragRackDom="nowDragRackDom"
              @mouseEnterTitle="mouseEnterTitle"
              @mouseLeaveTitle="mouseLeaveTitle"
              @openEditInput="openEditInput"
              @deleteBox="deleteBox"
              @handleEditInputName="handleEditInputName"
              @cancelEditInputName="cancelEditInputName"
              @rackDragStart="rackDragStart"
              @nodeDragStart="nodeDragStart"
            />
          </template>
        </div>
        <!-- 外部虚线提示的数据中心区域 -->
        <div v-if="isShowDashDataCenter" class="dash-data-center-box clearfix"></div>
        <!-- 外部虚线提示的机房 -->
        <div v-if="nowPlacementDataCenter == ''" class="room-container">
          <div class="dashed-dark-room"></div>
        </div>
        <!-- 外部虚线提示的机架区域 -->
        <div
          v-if="nowPlacementRoom == ''"
          class="rack-container"
        >
          <div class="dashed-rack"></div>
        </div>
      </div>
      

      <!-- 节点 -->
      <div 
        class="node-list-box clearfix"
        @click="selectedNode($event)"
        @drop="dropNodeList"
      >
        <p>节点</p>
        <div
          v-for="(item,index) in nodeData"
          class="node-box"
          draggable
          @dragstart="nodeDragStart(item, $event)"
          :key="'node'+index"
        >
          <p>
            <span class="green-circle"></span>
            <span :title="item.name">{{item.name}}</span>
          </p>
          <p :title="item.ip">
            <span class="node-ip">{{item.ip}}</span>
          </p>
        </div>
      </div>
    </div>

    <!-- 右边信息栏 -->
    <div class="right-info-bar">
      <h4>属性</h4>
    </div>
  </div>
</template>

<script>
import topologyData from './topologyData'
import nodeData from './nodeData'
import RoomBox from '@/views/physical/netSubPage/RoomBox'
import RackBox from '@/views/physical/netSubPage/RackBox'

export default {
  name: "NetPlanning",
  components: { RoomBox, RackBox },
  data() {
    return {
      toolData: [
        { ch_title: '数据中心', en_title:'Data Center', icon: '', type:'data-center' },
        { ch_title: '机房', en_title:'Machine Room', icon: '', type:'machine-room' },
        { ch_title: '机架', en_title:'Rack', icon: '', type:'rack' },
      ],
      topologyData: topologyData,
      currentTool: '',
      isShowDashDataCenter: false,
      nowPlacementDataCenter: null,
      nowPlacementRoom: null,
      nowPlacementDataCenterDom: null,
      nowPlacementRackDom: null,
      nowNodeStartDragDom: null, // 判断是从节点列表移动，还是机架的节点移动
      nowPlaceNodeList: null,
      topologySumObj: {
        allDataCenterNum: 0,
        allRoomNum: 0,
        allRackNum: 0,
        allNodeNum: 0,
      },
      nodeData: nodeData,
      currentPlaceNode: {},
      currentPlaceRack: {},
      currentPlaceRoom: {},
      nowDragDataCenterDom: null,
      nowDragRoomDom: null,
      nowDragRackDom: null
    }
  },

  mounted() {
    this.getAllToolNum(this.topologyData);
  },

  methods: {
    getAllToolNum(data) {
      this.initAllToolNum();
      this.countAllToolNum(data);
    },
    initAllToolNum() {
      this.topologySumObj.allDataCenterNum = 0;
      this.topologySumObj.allRoomNum = 0;
      this.topologySumObj.allRackNum = 0;
      this.topologySumObj.allNodeNum = 0;
    },
    // 计算所有工具类型的数量
    countAllToolNum(data) {
      data.forEach(item => {
        if(item.type === 'datacenter') {
          this.topologySumObj.allDataCenterNum++;
        }else if(item.type === 'room') {
          this.topologySumObj.allRoomNum++;
        }else if(item.type === 'rack') {
          this.topologySumObj.allRackNum++;
        }else if(item.type === 'node') {
          this.topologySumObj.allNodeNum++;
        }
        if(item.children) {
          this.countAllToolNum(item.children);
        }
      })
    },

    // 拖拽开始
    toolDragStart(toolType, e) {
      // console.log('toolDragStart', e)
      this.currentTool = toolType;
      this.nowDragRoomDom = this.getNowRoom(e.target);
      // e.dataTransfer.setData("Text", e.target.id);
    },

    // 拖拽移动
    // dropMove(e) {
    //   e.dataTransfer.dropEffect = 'none';
    //   console.log('dropMove', e)
    // },

    //结束拖拽
    toolDragEnd(e) {
      // e.dataTransfer.dropEffect = 'none';
      // console.log('toolDragEnd', e)
    },

    // 最大画布的释放拖拽
    handleDrop(e) {
      // e.preventDefault();
      console.log('ooo', e)
      this.clearAllEditInputMode();
      if(this.currentTool === 'data-center') {
        this.cancelAllSelected();
        this.topologyData.push({
          name: `新建数据中心${this.topologySumObj.allDataCenterNum+1}`,
          type: 'datacenter',
          children: []
        })
        // 获取最新添加进来的数据中心
        this.$nextTick(() => {
          const dropAreaDom = document.querySelector('.drop-area');
          const newDom = this.getLastNode(dropAreaDom, dropAreaDom.childNodes.length-1);
          newDom.childNodes[0].classList.add('data-center-box-selected');
          newDom.childNodes[0].childNodes[1].style.display = 'inline-block';
          newDom.childNodes[0].childNodes[0].style.display = 'none';
          //判断元素是否出现了滚动条
          if(dropAreaDom.scrollHeight > dropAreaDom.clientHeight) {
            //设置滚动条到最底部
            dropAreaDom.scrollTop = dropAreaDom.scrollHeight;
          }
        })
        this.isShowDashDataCenter = false;
      }else if(this.currentTool === 'machine-room') {
        let nowDataCenterIndex = 0;
        // 如果是在数据中心内部放置机房
        if(this.nowPlacementDataCenter) {
          this.topologyData.some((item, index) => {
            if(this.nowPlacementDataCenter.textContent.indexOf(item.name) !== -1) {
              nowDataCenterIndex = index;
              return true
            }
          })
          this.topologyData[nowDataCenterIndex].children.push({
            name: `room${this.topologySumObj.allRoomNum+1}`,
            type: 'room',
            children: []
          })
          const nowDataCenterDom = this.getNowDataCenter(e.target);
          this.$nextTick(() => {
            const newRoomContentDom = nowDataCenterDom.childNodes[2].childNodes;
            // 获取当前房间的标题
            let newTitleDom = null;
            if(newRoomContentDom[newRoomContentDom.length-1].nodeName !== "#comment") {
              newTitleDom = newRoomContentDom[newRoomContentDom.length-1].childNodes[0];
            }else {
              newTitleDom = newRoomContentDom[newRoomContentDom.length-2].childNodes[0];
            }
            newTitleDom.childNodes[1].style.display = 'inline-block';
            newTitleDom.childNodes[0].style.display = 'none';
          })
        }
        else {  // 否则在外部放置机房
          this.topologyData.push({
            name: `room${this.topologySumObj.allRoomNum+1}`,
            type: 'room',
            children: []
          })
          this.$nextTick(() => {
            const dropAreaDom = document.querySelector('.drop-area');
            const maxDataCenterLength = dropAreaDom.childNodes.length;
            const newNode = this.getLastNode(dropAreaDom, maxDataCenterLength-1);
            newNode.childNodes[0].childNodes[0].classList.add('room-box-selected');
            newNode.childNodes[0].childNodes[0].childNodes[1].style.display = 'inline-block';
            newNode.childNodes[0].childNodes[0].childNodes[0].style.display = 'none';
          })
        }
        this.nowPlacementDataCenter = null;
      }else if(this.currentTool === 'rack') {
        // 如果是在机房内放置机架
        if(this.nowPlacementRoom) {
          const outplacementBox = this.nowPlacementRoom.parentNode.parentNode.parentNode;
          // 判断有没有在数据中心内部的机房放置机架
          if(outplacementBox._prevClass === 'data-center-box') {
            // 判断当前是移动机架还是新增机架
            if(Object.keys(this.currentPlaceRack).length != 0) { // 移动机架
              if(this.nowDragDataCenterDom && this.nowDragRoomDom) {
                this.moveRackFun('in-dc-room', true);
              }else if(!this.nowDragDataCenterDom && this.nowDragRoomDom) { //从数据中心外部机房移到数据中心内部机房
                this.moveRackFun('out-to-dc-room', false);
              }else if(!this.nowDragDataCenterDom && !this.nowDragRoomDom) { //从数据中心最外部的机架移动到数据中心内部
                this.moveRackFun('out-to-dc-room', false, false);
              }
            }else { // 新增机架
              let nowDataCenterIndex = 0;
              let nowRoomIndex = 0;
              this.topologyData.some((item, index) => {
                if(this.nowPlacementDataCenterDom.textContent.indexOf(item.name) !== -1) {
                  nowDataCenterIndex = index;
                  return true
                }
              })
              this.topologyData[nowDataCenterIndex].children.some((item, index) => {
                if(this.nowPlacementRoom.textContent.indexOf(item.name) !== -1) {
                  nowRoomIndex = index;
                  return true
                }
              })
              this.topologyData[nowDataCenterIndex].children[nowRoomIndex].children.push({
                name: `rack${this.topologySumObj.allRackNum+1}`,
                type: 'rack',
                children: []
              })
              const nowRoomDom = this.getNowRoom(e.target);
              this.$nextTick(() => {
                const newNode = this.getLastNode(nowRoomDom.childNodes[2], nowRoomDom.childNodes[2].childNodes.length-1);
                newNode.childNodes[0].classList.add('rack-box-selected');
                newNode.childNodes[0].childNodes[1].style.display = 'inline-block';
                newNode.childNodes[0].childNodes[0].style.display = 'none';
              })
            }
          }else if(outplacementBox._prevClass === 'drop-area') { // 在数据中心外部的机房放置机架
            if(Object.keys(this.currentPlaceRack).length != 0) { // 移动机架
              if(this.nowDragDataCenterDom && this.nowDragRoomDom) {
                this.moveRackFun('out-dc-room', true);
              }else if(!this.nowDragDataCenterDom && !this.nowDragRoomDom){
                this.moveRackFun('out-dc-room', false, false);
              }
            }else { //新增机架
              let nowRoomIndex = 0;
              this.topologyData.some((item, index) => {
                if(this.nowPlacementRoom.textContent.indexOf(item.name) !== -1) {
                  nowRoomIndex = index;
                  return true
                }
              })
              this.topologyData[nowRoomIndex].children.push({
                name: `rack${this.topologySumObj.allRackNum+1}`,
                type: 'rack',
                children: []
              })
              const nowRoomDom = this.getNowRoom(e.target);
              this.$nextTick(() => {
                const newNode = this.getLastNode(nowRoomDom.childNodes[2], nowRoomDom.childNodes[2].childNodes.length-1);
                newNode.childNodes[0].classList.add('rack-box-selected');
                newNode.childNodes[0].childNodes[1].style.display = 'inline-block';
                newNode.childNodes[0].childNodes[0].style.display = 'none';
              })
            } 
          }
        }else {  // 在机房外部放置机架
          if(Object.keys(this.currentPlaceRack).length != 0) { // 移动机架
            if(this.nowDragDataCenterDom) {
              this.moveRackFun('out-dc-and-room', true);
            }else { //从数据中心外部机房移到数最外层
              
              this.moveRackFun('out-dc-and-room', false);
            }
          }else { //新增机架
            this.topologyData.push({
              name: `rack${this.topologySumObj.allRackNum+1}`,
              type: 'rack',
              children: []
            })
            this.$nextTick(() => {
              const dropAreaDom = document.querySelector('.drop-area');
              const maxDataCenterLength = dropAreaDom.childNodes.length;
              const newNode = this.getLastNode(dropAreaDom, maxDataCenterLength-1);
              newNode.childNodes[0].childNodes[0].classList.add('rack-box-selected');
              newNode.childNodes[0].childNodes[0].childNodes[1].style.display = 'inline-block';
              newNode.childNodes[0].childNodes[0].childNodes[0].style.display = 'none';
            })
          }
        }
        this.nowPlacementRoom = null;
      }else if(this.currentTool === 'node') {
        if(this.nowPlacementRackDom) {
          const outplacementBox = this.nowPlacementRackDom.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
          // 如果是在数据中心的内部的机架放置机器
          if(outplacementBox._prevClass === "data-center-box") {
            let nowDataCenterIndex = 0;
            let nowRoomIndex = 0;
            let nowRackIndex = 0;
            this.topologyData.some((item, index) => {
              if(this.nowPlacementDataCenterDom.textContent.indexOf(item.name) !== -1) {
                nowDataCenterIndex = index;
                return true
              }
            })
            this.topologyData[nowDataCenterIndex].children.some((item, index) => {
              if(this.nowPlacementRoom.textContent.indexOf(item.name) !== -1) {
                nowRoomIndex = index;
                return true
              }
            })
            this.topologyData[nowDataCenterIndex].children[nowRoomIndex].children.some((item, index) => {
              if(this.nowPlacementRackDom.textContent.indexOf(item.name) !== -1) {
                nowRackIndex = index;
                return true
              }
            })
            this.topologyData[nowDataCenterIndex].children[nowRoomIndex].children[nowRackIndex].children.push({
              name: this.currentPlaceNode.name,
              type: 'node',
              status: this.currentPlaceNode.status,
              ip: this.currentPlaceNode.ip
            })
          }else if(outplacementBox._prevClass === "drop-area") { // 否则是在外部机房的机架内放置
            let nowRoomIndex = 0;
            let nowRackIndex = 0;
            this.topologyData.some((item, index) => {
              if(this.nowPlacementRoom.textContent.indexOf(item.name) !== -1) {
                nowRoomIndex = index;
                return true
              }
            })
            this.topologyData[nowRoomIndex].children.some((item, index) => {
              if(this.nowPlacementRackDom.textContent.indexOf(item.name) !== -1) {
                nowRackIndex = index;
                return true
              }
            })
            this.topologyData[nowRoomIndex].children[nowRackIndex].children.push({
              name: this.currentPlaceNode.name,
              type: 'node',
              status: this.currentPlaceNode.status,
              ip: this.currentPlaceNode.ip
            })
          }else if(outplacementBox._prevClass === "ant-tabs-tabpane ant-tabs-tabpane-active") { // 机房内的机架放在最外层的机架
            let nowRackIndex = 0;
            this.topologyData.some((item, index) => {
              if(this.nowPlacementRackDom.textContent.indexOf(item.name) !== -1) {
                nowRackIndex = index;
                return true
              }
            })
            this.topologyData[nowRackIndex].children.push({
              name: this.currentPlaceNode.name,
              type: 'node',
              status: this.currentPlaceNode.status,
              ip: this.currentPlaceNode.ip
            })
          }
          if(this.nowNodeStartDragDom._prevClass === "node-list-box clearfix") { //在节点列表移动
            this.nodeData = this.nodeData.filter(item => {
              return item.name != this.currentPlaceNode.name
            })
          }else if(this.nowNodeStartDragDom._prevClass === "panel-body") { // 在机架内移动
            let nowDataCenterIndex = 0;
            let nowRoomIndex = 0;
            let nowRackIndex = 0;
            let nowNodeIndex = 0;
            const nowDragRackDom = this.getNowRack(this.nowNodeStartDragDom);
            const nowDragRoomDom = this.getNowRoom(this.nowNodeStartDragDom);
            const nowDragDataCenterDom = this.getNowDataCenter(this.nowNodeStartDragDom);
            if(nowDragDataCenterDom && nowDragRoomDom) { // 在数据中心内部开始移动的
              this.topologyData.some((item, index) => {
                if(nowDragDataCenterDom.textContent.indexOf(item.name) !== -1) {
                  nowDataCenterIndex = index;
                  return true
                }
              })
              this.topologyData[nowDataCenterIndex].children.some((item, index) => {
                if(nowDragRoomDom.textContent.indexOf(item.name) !== -1) {
                  nowRoomIndex = index;
                  return true
                }
              })
              this.topologyData[nowDataCenterIndex].children[nowRoomIndex].children.some((item, index) => {
                if(nowDragRackDom.textContent.indexOf(item.name) !== -1) {
                  nowRackIndex = index;
                  return true
                }
              })
              this.topologyData[nowDataCenterIndex].children[nowRoomIndex].children[nowRackIndex].children.some((item,index) => {
                if(item.name === this.currentPlaceNode.name) {
                  nowNodeIndex = index;
                  return true
                }
              })
              this.topologyData[nowDataCenterIndex].children[nowRoomIndex].children[nowRackIndex].children.splice(nowNodeIndex, 1);
            }else if(!nowDragDataCenterDom && nowDragRoomDom) { // 在数据中心外部的机房开始移动的
              this.topologyData.some((item, index) => {
                if(nowDragRoomDom.textContent.indexOf(item.name) !== -1) {
                  nowRoomIndex = index;
                  return true
                }
              })
              this.topologyData[nowRoomIndex].children.some((item, index) => {
                if(nowDragRackDom.textContent.indexOf(item.name) !== -1) {
                  nowRackIndex = index;
                  return true
                }
              })
              this.topologyData[nowRoomIndex].children[nowRackIndex].children.some((item, index) => {
                if(item.name === this.currentPlaceNode.name) {
                  nowNodeIndex = index;
                  return true
                }
              })
              this.topologyData[nowRoomIndex].children[nowRackIndex].children.splice(nowNodeIndex, 1);
            }else if(!nowDragDataCenterDom && !nowDragRoomDom) {// 在数据中心外部的机架开始移动的
              this.topologyData.some((item, index) => {
                if(nowDragRackDom.textContent.indexOf(item.name) !== -1) {
                  nowRackIndex = index;
                  return true
                }
              })
              this.topologyData[nowRackIndex].children.some((item, index) => {
                if(item.name === this.currentPlaceNode.name) {
                  nowNodeIndex = index;
                  return true
                }
              })
              this.topologyData[nowRackIndex].children.splice(nowNodeIndex, 1);
            }
          }
        }
        this.currentPlaceNode = {};
      }
      this.getAllToolNum(this.topologyData);
      this.nowPlacementRackDom = null;
      this.currentTool = '';
    },

    // 最大画布 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    allowDrop(e) {
      // console.log('11', e)
      e.preventDefault();
      e.dataTransfer.dropEffect = 'move';
      if(this.currentTool == 'data-center') {
        const nowGraph = this.getNowDataCenter(e.target).parentNode ? this.getNowDataCenter(e.target).parentNode : '';
        if(nowGraph._prevClass === 'drop-area' || e.target._prevClass === 'drop-area' || e.target._prevClass === 'dash-data-center-box' || nowGraph._prevClass === 'clearfix') {
          this.isShowDashDataCenter = true;
        }else {
          this.isShowDashDataCenter = false;
        }
      }else if(this.currentTool == 'machine-room') {
        this.nowPlacementDataCenter = this.getNowDataCenter(e.target);
        if(this.nowPlacementDataCenter == '') {
          const targetGraphDom = this.getGraphDom(e.target);
          if(targetGraphDom === '') {
            this.nowPlacementDataCenter = null;
          }
        }
      }else if(this.currentTool == 'rack') {
        this.nowPlacementDataCenterDom = this.getNowDataCenter(e.target);
        this.nowPlacementRoom = this.getNowRoom(e.target);
        if(this.nowPlacementRoom == '') {
          const targetGraphDom = this.getGraphDom(e.target);
          if(targetGraphDom === '') {
            this.nowPlacementRoom = null;
          }
        }
      }else if(this.currentTool == 'node') {
        this.nowPlacementDataCenterDom = this.getNowDataCenter(e.target);
        this.nowPlacementRoom = this.getNowRoom(e.target);
        if(this.nowPlacementRoom == '') {
          this.nowPlacementRoom = null;
        }
        this.nowPlacementRackDom = this.getNowRack(e.target);
        if(this.nowPlacementRackDom == '') {
          this.nowPlacementRackDom = null;
        }
        this.nowPlaceNodeList = this.getNowNodeListBox(e.target);
      }
    },

    // 取最后一个有效节点
    getLastNode(eTarget, index) {
      if(eTarget.childNodes[index].nodeName !== '#comment') {
        return eTarget.childNodes[index]
      }else {
        return this.getLastNode(eTarget, index-1);
      }
    },

    mouseEnterTitle(e) {
      e.target.lastChild.childNodes.forEach(item => {
        item.style.visibility = 'visible';
      })
    },
    
    mouseLeaveTitle(e) {
      // 如果当前数据中心选中了，不隐藏
      if(e.target.parentNode.className.indexOf('data-center-box-selected')!= -1) {
        return
      }
      e.target.lastChild.childNodes.forEach(item => {
        item.style.visibility = 'hidden';
      })
    },

    //点击外层画布，取消所有选中状态
    cancelAllSelected() {
      // console.log('清空')
      // 取消所有数据中心选中状态
      const allDataCenterBox = document.querySelectorAll('.data-center-box');
      allDataCenterBox.forEach(item => {
        item.classList.remove('data-center-box-selected');
      })
      // 隐藏所有数据中心操作按钮
      // const allOperateIcon = document.querySelectorAll('.operate-icon');
      // allOperateIcon.forEach(item => {
      //   item.style.visibility = 'hidden';
      // })
      const allDataCenterOperateIcon = document.querySelectorAll('.data-center-box');
      allDataCenterOperateIcon.forEach(item => {
        item.childNodes[0].childNodes[1].childNodes[0].style.visibility = 'hidden';
        item.childNodes[0].childNodes[1].childNodes[1].style.visibility = 'hidden';
      })
      // 取消所有机房选中状态
      const allRoomBox = document.querySelectorAll('.room');
      allRoomBox.forEach(item => {
        item.classList.remove('room-box-selected');
      })
      // 取消所有机架选中状态
      const allRack = document.querySelectorAll('.rack');
      allRack.forEach(item => {
        item.classList.remove('rack-box-selected');
      })
      // 取消所有机器选中状态
      const allMachine = document.querySelectorAll('.machine');
      allMachine.forEach(item => {
        item.classList.remove('machine-box-selected');
      })
      // 取消所有节点选中状态
      const allNodeBox = document.querySelectorAll('.node-box');
      allNodeBox.forEach(item => {
        item.classList.remove('machine-box-selected');
      })
    },

    // 选中数据中心
    selectDataCenter(e) {
      console.log('选中', e)
      e.stopPropagation();
      this.cancelAllSelected();
      // 获取当前数据中心
      const targetDataCenter = this.getNowDataCenter(e.target);
      if(e.target._prevClass === "panel-head" || e.target._prevClass === "data-center-name-input" || e.target._prevClass === "panel-body") {
        if(e.target.parentNode._prevClass == 'data-center-box') {
          e.target.parentNode.classList.add('data-center-box-selected');
          e.target.parentNode.firstChild.childNodes[1].childNodes.forEach(item => {
            item.style.visibility = 'visible';
          })
          this.clearBoxSelected(targetDataCenter, ['room', 'rack', 'machine']);
        }else if(e.target.parentNode._prevClass == 'room') {
          e.target.parentNode.classList.add('room-box-selected');
          this.hideDataCenterBtn(targetDataCenter);
          this.clearBoxSelected(targetDataCenter, ['data-center', 'rack', 'machine']);
        }else if(e.target.parentNode._prevClass == 'rack') {
          e.target.parentNode.classList.add('rack-box-selected');
          this.hideDataCenterBtn(targetDataCenter);
          this.clearBoxSelected(targetDataCenter, ['data-center', 'room', 'machine']);
        }
      }else if(e.target._prevClass === "operate-icon-box" || e.target._prevClass === "panel-head-title") {
        if(e.target.parentNode.parentNode._prevClass == 'data-center-box') {
          e.target.parentNode.parentNode.classList.add('data-center-box-selected');
          targetDataCenter.childNodes[0].childNodes[1].childNodes[0].style.visibility = 'visible';
          targetDataCenter.childNodes[0].childNodes[1].childNodes[1].style.visibility = 'visible';
          this.clearBoxSelected(targetDataCenter, ['room', 'rack', 'machine']);
        }else if(e.target.parentNode.parentNode._prevClass == 'room') {
          e.target.parentNode.parentNode.classList.add('room-box-selected');
          this.hideDataCenterBtn(targetDataCenter);
          this.clearBoxSelected(targetDataCenter, ['data-center', 'rack', 'machine']);
        }else if(e.target.parentNode.parentNode._prevClass == 'rack') {
          e.target.parentNode.parentNode.classList.add('rack-box-selected');
          this.hideDataCenterBtn(targetDataCenter);
          this.clearBoxSelected(targetDataCenter, ['data-center', 'room', 'machine']);
        }
      }else if(e.target._prevClass === "ant-input") {
        const outBox = e.target.parentNode.parentNode.parentNode;
        if(outBox._prevClass === "data-center-box") {
          outBox.classList.add('data-center-box-selected');
          this.clearBoxSelected(targetDataCenter, ['room', 'rack', 'machine']);
        }else if(outBox._prevClass === "room") {
          e.target.parentNode.parentNode.parentNode.classList.add('room-box-selected');
          this.hideDataCenterBtn(targetDataCenter);
          this.clearBoxSelected(targetDataCenter, ['data-center', 'rack', 'machine']);
        }else if(outBox._prevClass === "rack") {
          e.target.parentNode.parentNode.parentNode.classList.add('rack-box-selected');
          this.hideDataCenterBtn(targetDataCenter);
          this.clearBoxSelected(targetDataCenter, ['data-center', 'room', 'machine']);
        }
      }else if(e.target._prevClass === "host-name" || e.target._prevClass === "host-ip") {
        e.target.parentNode.classList.add('machine-box-selected');
        this.hideDataCenterBtn(targetDataCenter);
        this.clearBoxSelected(targetDataCenter, ['data-center', 'rack', 'room']);
      }else if(e.target._prevClass === "node-ip" || e.target._prevClass === "node-name" || e.target._prevClass.indexOf('circle') != -1) {
        e.target.parentNode.parentNode.classList.add('machine-box-selected');
        this.hideDataCenterBtn(targetDataCenter);
        this.clearBoxSelected(targetDataCenter, ['data-center', 'rack', 'room']);
      }
      else if(e.target._prevClass === "data-center-box"){
        e.target.classList.add('data-center-box-selected');
        e.target.firstChild.childNodes[1].childNodes.forEach(item => {
          item.style.visibility = 'visible';
        })
      }else if(e.target._prevClass === "room") {
        e.target.classList.add('room-box-selected');
        this.hideDataCenterBtn(targetDataCenter);
        this.clearBoxSelected(targetDataCenter, ['data-center', 'rack', 'machine']);
      }else if(e.target._prevClass === "room-container") {
        e.target.childNodes[0].classList.add('room-box-selected');
        this.hideDataCenterBtn(targetDataCenter);
        this.clearBoxSelected(targetDataCenter, ['data-center', 'rack', 'machine']);
      }
      else if(e.target._prevClass === "rack") {
        e.target.classList.add('rack-box-selected');
        this.hideDataCenterBtn(targetDataCenter);
        this.clearBoxSelected(targetDataCenter, ['data-center', 'room', 'machine']);
      }else if(e.target._prevClass === "rack-container") {
        e.target.childNodes[0].classList.add('rack-box-selected');
        this.hideDataCenterBtn(targetDataCenter);
        this.clearBoxSelected(targetDataCenter, ['data-center', 'room', 'machine']);
      }
      else if(e.target._prevClass === "machine") {
        e.target.classList.add('machine-box-selected');
        this.hideDataCenterBtn(targetDataCenter);
        this.clearBoxSelected(targetDataCenter, ['data-center', 'room', 'rack']);
      }else {
        return
      }
    },

    // 选择节点
    selectedNode(e) {
      e.stopPropagation();
      const nowNodeBox = this.getNowNodeBox(e.target);
      if(nowNodeBox === "") {
        this.cancelAllSelected();
        return
      }
      // 先清除所有选中，在给当前添加选中
      this.cancelAllSelected();
      nowNodeBox.classList.add('machine-box-selected');
    },

    //清除当前数据中心内的选中状态
    clearBoxSelected(nowDataCenterDom, type) {
      if(!nowDataCenterDom) {
        return
      }
      if(type.indexOf('room') !== -1) {
        nowDataCenterDom.childNodes[2].childNodes.forEach(item => {
          if(item._prevClass && item._prevClass === "room-container") {
            item.childNodes[0].classList.remove('room-box-selected');
          }
        })
      }
      if(type.indexOf('data-center') !== -1) {
        nowDataCenterDom.classList.remove('data-center-box-selected');
      }
      if(type.indexOf('rack') !== -1) {
        if(nowDataCenterDom.childNodes[2].childNodes[0].nodeName == '#comment') {
          return
        }
        const rackPanelBody = nowDataCenterDom.childNodes[2].childNodes[0].childNodes[0].childNodes[2];
        // if(nowDataCenterDom.childNodes[2].childNodes.length!=0 && nowDataCenterDom.childNodes[2].childNodes[0].nodeName != '#comment') {
          if(rackPanelBody.length != 0 && rackPanelBody.childNodes && rackPanelBody.childNodes.length != 0) {
            rackPanelBody.childNodes[0].childNodes[0].classList.remove('rack-box-selected');
          }
        // }
      }
      if(type.indexOf('machine') !== -1) {
        if(nowDataCenterDom.childNodes[2].childNodes.length!=0 && nowDataCenterDom.childNodes[2].childNodes[0].nodeName != '#comment') {
          const rackPanelBody = nowDataCenterDom.childNodes[2].childNodes[0].childNodes[0].childNodes[2].childNodes;
          if(rackPanelBody.length != 0) {
            rackPanelBody[0].childNodes[0].childNodes[2].childNodes[0].classList.remove('machine-box-selected');
          }
        }
      }
    },

    // 清空所有输入框的编辑模式
    clearAllEditInputMode() {
      const allEditInputDom = document.querySelectorAll('.data-center-name-input');
      const allPanelHeadDom = document.querySelectorAll('.panel-head');
      allEditInputDom.forEach(item => {
        item.style.display = 'none';
      })
      allPanelHeadDom.forEach(item => {
        item.style.display = 'flex';
      })
    },

    //显示编辑输入框
    openEditInput(e) {
      // console.log('显示编辑', e)
      e.stopPropagation();
      const currentAreaDom = e.target.parentNode.parentNode.parentNode;
      const targetDataCenter = this.getNowDataCenter(e.target);
      //只存在一个当前的选中状态的数据中心的名字编辑框
      const allEditInputDom = document.querySelectorAll('.data-center-name-input');
      const allPanelHeadDom = document.querySelectorAll('.panel-head');
      allEditInputDom.forEach(item => {
        item.style.display = 'none';
      })
      allPanelHeadDom.forEach(item => {
        item.style.display = 'flex';
      })
      // 将数据中心的名字赋值给输入框
      e.target.parentNode.parentNode.parentNode.childNodes[1].childNodes[0].childNodes[0].value = e.target.parentNode.parentNode.parentNode.childNodes[0].childNodes[0].textContent;
      e.target.parentNode.parentNode.parentNode.childNodes[1].style.display = 'inline-block';
      e.target.parentNode.parentNode.parentNode.childNodes[0].style.display = 'none';
      this.operatingNowBox(currentAreaDom, targetDataCenter);
    },

    // 删除盒子
    deleteBox(delItem, e) {
      // console.log('删除对象', e)
      // console.log(delItem, e)
      e.stopPropagation();
      if(delItem.children.length != 0) {
        this.$notification.warning({
          message: `当前节点 "${delItem.name}" 存在${delItem.children.length}个子节点`,
          description:'',
          top: '56px',
          style: {
            padding: '10px',
            backgroundColor: '#fbf8ee',
          },
          class: 'topology-page-custom-warn-notification'
        });
      }else {
        const delDom = e.target.parentNode.parentNode.parentNode.parentNode;
        delDom.parentNode.removeChild(delDom);
      }
    },

    //确认编辑数据中心的名字
    handleEditInputName(e) {
      // console.log('确认', e)
      e.stopPropagation();
      const targetDataCenter = this.getNowDataCenter(e.target);
      //当前工具类型区域
      let currentAreaDom = null;
      //获取输入框的值
      if(e.target.nodeName === 'svg') {
        currentAreaDom = e.target.parentNode.parentNode.parentNode;
        const inputValue = e.target.parentNode.parentNode.childNodes[0].childNodes[0].value;
        e.target.parentNode.parentNode.parentNode.childNodes[0].style.display = 'flex';
        e.target.parentNode.parentNode.parentNode.childNodes[1].style.display = 'none';
        e.target.parentNode.parentNode.parentNode.childNodes[0].childNodes[0].textContent = inputValue;
        e.target.parentNode.parentNode.parentNode.childNodes[0].childNodes[0].title = inputValue;
      }else if(e.target.nodeName === 'path') {
        currentAreaDom = e.target.parentNode.parentNode.parentNode.parentNode;
        const inputValue = e.target.parentNode.parentNode.parentNode.childNodes[0].childNodes[0].value;
        e.target.parentNode.parentNode.parentNode.parentNode.childNodes[0].style.display = 'flex';
        e.target.parentNode.parentNode.parentNode.parentNode.childNodes[1].style.display = 'none';
        e.target.parentNode.parentNode.parentNode.parentNode.childNodes[0].childNodes[0].textContent = inputValue;
        e.target.parentNode.parentNode.parentNode.parentNode.childNodes[0].childNodes[0].title = inputValue;
      }
      this.operatingNowBox(currentAreaDom, targetDataCenter);
    },

    //取消编辑数据中心的名字
    cancelEditInputName(e) {
      // console.log(e)
      e.stopPropagation();
      const targetDataCenter = this.getNowDataCenter(e.target);
      //当前工具类型区域
      let currentAreaDom = null;
      //解决a-icon中元素位置问题
      if(e.target.nodeName === 'svg') {
        currentAreaDom = e.target.parentNode.parentNode.parentNode;
        // e.target.parentNode.parentNode.parentNode.childNodes[1].style.display = 'none';
        // e.target.parentNode.parentNode.parentNode.childNodes[0].style.display = 'flex';
      }else if(e.target.nodeName === 'path') {
        currentAreaDom = e.target.parentNode.parentNode.parentNode.parentNode;
      }
      currentAreaDom.childNodes[1].style.display = 'none';
      currentAreaDom.childNodes[0].style.display = 'flex';
      this.operatingNowBox(currentAreaDom, targetDataCenter);
    },

    // 获取画布元素
    getGraphDom(eTarget) {
      if(!eTarget) {
        return '';
      }
      if(eTarget._prevClass === 'drop-area') {
        return eTarget;
      }else {
        return this.getGraphDom(eTarget.parentNode);
      }
    },

    // 获取当前数据中心
    getNowDataCenter(eTarget) {
      if(!eTarget) {
        return '';
      }
      if(eTarget._prevClass === 'data-center-box') {
        return eTarget;
      }else {
        return this.getNowDataCenter(eTarget.parentNode);
      }
    },

    // 获取当前机房
    getNowRoom(eTarget) {
      if(!eTarget) {
        return '';
      }
      if(eTarget._prevClass === 'room') {
        return eTarget;
      }else {
        return this.getNowRoom(eTarget.parentNode);
      }
    },

    // 获取当前机架
    getNowRack(eTarget) {
      if(!eTarget) {
        return '';
      }
      if(eTarget._prevClass === 'rack') {
        return eTarget;
      }else {
        return this.getNowRack(eTarget.parentNode);
      }
    },

    // 获取当前节点盒子
    getNowNodeBox(eTarget) {
      if(!eTarget) {
        return ''
      }
      if(eTarget._prevClass === 'node-box') {
        return eTarget;
      }else {
        return this.getNowNodeBox(eTarget.parentNode);
      }
    },

    // 获取当前节点列表盒子
    getNowNodeListBox(eTarget) {
      if(!eTarget) {
        return ''
      }
      if(eTarget._prevClass === 'node-list-box clearfix') {
        return eTarget;
      }else {
        return this.getNowNodeListBox(eTarget.parentNode);
      }
    },

    // 正在进行操作时，选中当前盒子，取消选中其他盒子
    operatingNowBox(currentAreaDom, targetDataCenter) {
      this.cancelAllSelected();
      if(currentAreaDom._prevClass === 'data-center-box') {
        currentAreaDom.classList.add('data-center-box-selected');
        this.clearBoxSelected(targetDataCenter, ['room', 'rack', 'machine']);
      }else if(currentAreaDom._prevClass === 'room') {
        currentAreaDom.classList.add('room-box-selected');
        this.clearBoxSelected(targetDataCenter, ['data-center', 'rack', 'machine']);
      }else if(currentAreaDom._prevClass === 'rack') {
        currentAreaDom.classList.add('rack-box-selected');
        this.clearBoxSelected(targetDataCenter, ['room', 'data-center', 'machine']);
      }
    },

    // 隐藏数据中心的操作按钮
    hideDataCenterBtn(targetDataCenter) {
      if(targetDataCenter) {
        targetDataCenter.childNodes[0].childNodes[1].childNodes.forEach(item => {
          item.style.visibility = 'hidden';
        })
      }
    },

    // 节点开始拖拽事件
    nodeDragStart(node, e) {
      this.nowNodeStartDragDom = e.target.parentNode;
      // console.log('节点拖拽时的父节点', this.nowNodeStartDragDom)
      this.currentPlaceNode = node;
      this.currentTool = 'node';
      this.nowDragRackDom = this.getNowRack(e.target);
    },

    // 向节点列表释放节点
    dropNodeList(e) {
      if(this.currentTool === 'node') {
        if(this.nowPlaceNodeList) {
          let nowDataCenterIndex = 0;
          let nowRoomIndex = 0;
          let nowRackIndex = 0;
          let nowNodeIndex = 0;
          const nowDragRackDom = this.getNowRack(this.nowNodeStartDragDom);
          const nowDragRoomDom = this.getNowRoom(this.nowNodeStartDragDom);
          const nowDragDataCenterDom = this.getNowDataCenter(this.nowNodeStartDragDom);
          if(nowDragDataCenterDom) { // 在数据中心内部开始移动的
            this.topologyData.some((item, index) => {
              if(nowDragDataCenterDom.textContent.indexOf(item.name) !== -1) {
                nowDataCenterIndex = index;
                return true
              }
            })
            this.topologyData[nowDataCenterIndex].children.some((item, index) => {
              if(nowDragRoomDom.textContent.indexOf(item.name) !== -1) {
                nowRoomIndex = index;
                return true
              }
            })
            this.topologyData[nowDataCenterIndex].children[nowRoomIndex].children.some((item, index) => {
              if(nowDragRackDom.textContent.indexOf(item.name) !== -1) {
                nowRackIndex = index;
                return true
              }
            })
            this.topologyData[nowDataCenterIndex].children[nowRoomIndex].children[nowRackIndex].children.some((item,index) => {
              if(item.name === this.currentPlaceNode.name) {
                nowNodeIndex = index;
                return true
              }
            })
            this.topologyData[nowDataCenterIndex].children[nowRoomIndex].children[nowRackIndex].children.splice(nowNodeIndex, 1);
          }else { // 在数据中心外部开始移动的
            if(!nowDragRoomDom && !nowDragRackDom) {
              return
            }else if(nowDragRoomDom && nowDragRackDom) {
              this.topologyData.some((item, index) => {
                if(nowDragRoomDom.textContent.indexOf(item.name) !== -1) {
                  nowRoomIndex = index;
                  return true
                }
              })
              this.topologyData[nowRoomIndex].children.some((item, index) => {
                if(nowDragRackDom.textContent.indexOf(item.name) !== -1) {
                  nowRackIndex = index;
                  return true
                }
              })
              this.topologyData[nowRoomIndex].children[nowRackIndex].children.some((item, index) => {
                if(item.name === this.currentPlaceNode.name) {
                  nowNodeIndex = index;
                  return true
                }
              })
              this.topologyData[nowRoomIndex].children[nowRackIndex].children.splice(nowNodeIndex, 1);
            }else if(!nowDragRoomDom && nowDragRackDom) { //最外层机架的机器移动到节点列表
              this.topologyData.some((item, index) => {
                if(nowDragRackDom.textContent.indexOf(item.name) !== -1) {
                  nowRackIndex = index;
                  return true
                }
              })
              this.topologyData[nowRackIndex].children.some((item, index) => {
                if(item.name === this.currentPlaceNode.name) {
                  nowNodeIndex = index;
                  return true
                }
              })
              this.topologyData[nowRackIndex].children.splice(nowNodeIndex, 1);
            }
          }
          this.nodeData.push({
            name: this.currentPlaceNode.name,
            type: 'node',
            status: this.currentPlaceNode.status,
            ip: this.currentPlaceNode.ip
          })
        }
      }
    },

    // 机架开始拖拽事件
    rackDragStart(rack, e) {
      // console.log('rack', e)
      if(e.target._prevClass == 'machine') {
        return
      }
      this.currentTool = 'rack';
      this.currentPlaceRack = rack;
      this.nowDragDataCenterDom = this.getNowDataCenter(e.target);
      if(!this.nowDragDataCenterDom) {
        this.nowDragDataCenterDom = null;
      }
      this.nowDragRoomDom = this.getNowRoom(e.target);
    },

    // 移动机架的方法
    //isExistDragDataCenter: 当前拖拽的对象是否在数据中心内部
    moveRackFun(type, isExistDragDataCenter=true, isExistDragRoom=true) {
      if(this.nowDragRoomDom.textContent === this.nowPlacementRoom.textContent) { //当前机房机架移到当前机房
        return
      }
      if(isExistDragDataCenter) {
        let nowDragRackIndex = 0;
        let nowDragRoomIndex = 0;
        let nowDragDataCenterIndex = 0;
        this.topologyData.some((item, index) => {
          if(this.nowDragDataCenterDom.textContent.indexOf(item.name) !== -1) {
            nowDragDataCenterIndex = index;
            return true
          }
        })
        this.topologyData[nowDragDataCenterIndex].children.some((item, index) => {
          if(this.nowDragRoomDom.textContent.indexOf(item.name) !== -1) {
            nowDragRoomIndex = index;
            return true
          }
        })
        this.topologyData[nowDragDataCenterIndex].children[nowDragRoomIndex].children.some((item, index) => {
          if(this.currentPlaceRack.name === item.name) {
            nowDragRackIndex = index;
            return true
          }
        })
        if(type === "in-dc-room") { //数据中心内部机房
          let nowDataCenterIndex = 0;
          let nowRoomIndex = 0;
          this.topologyData.some((item, index) => {
            if(this.nowPlacementDataCenterDom.textContent.indexOf(item.name) !== -1) {
              nowDataCenterIndex = index;
              return true
            }
          })
          this.topologyData[nowDataCenterIndex].children.some((item, index) => {
            if(this.nowPlacementRoom.textContent.indexOf(item.name) !== -1) {
              nowRoomIndex = index;
              return true
            }
          })
          this.topologyData[nowDragDataCenterIndex].children[nowDragRoomIndex].children.splice(nowDragRackIndex, 1);
          this.topologyData[nowDataCenterIndex].children[nowRoomIndex].children.push(this.currentPlaceRack);
        }else if(type === "out-dc-room") { //数据中心外部的机房
          let nowPlaceRoomIndex = 0;
          this.topologyData.some((item, index) => {
            if(this.nowPlacementRoom.textContent.indexOf(item.name) !== -1) {
              nowPlaceRoomIndex = index;
              return true
            }
          })
          this.topologyData[nowDragDataCenterIndex].children[nowDragRoomIndex].children.splice(nowDragRackIndex, 1);
          this.topologyData[nowPlaceRoomIndex].children.push(this.currentPlaceRack);
        }else if(type === "out-dc-and-room") { // 数据中心机房内的机架移到数据中心最外部
          this.topologyData[nowDragDataCenterIndex].children[nowDragRoomIndex].children.splice(nowDragRackIndex, 1);
          this.topologyData.push(this.currentPlaceRack);
        }
      }else {
        let nowDragRoomIndex = 0;
        let nowDragRackIndex = 0;
        if(isExistDragRoom) {
          this.topologyData.some((item, index) => {
            if(this.nowDragRoomDom.textContent.indexOf(item.name) !== -1) {
              nowDragRoomIndex = index;
              return true
            }
          })
          this.topologyData[nowDragRoomIndex].children.some((item, index) => {
            if(this.currentPlaceRack.name === item.name) {
              nowDragRackIndex = index;
              return true
            }
          })
        }
        if(type === 'out-to-dc-room') {
          let nowPlaceDataCenterIndex = 0;
          let nowPlaceRoomIndex = 0;
          this.topologyData.some((item, index) => {
            if(this.nowPlacementDataCenterDom.textContent.indexOf(item.name) !== -1) {
              nowPlaceDataCenterIndex = index;
              return true
            }
          })
          this.topologyData[nowPlaceDataCenterIndex].children.some((item, index) => {
            if(this.nowPlacementRoom.textContent.indexOf(item.name) !== -1) {
              nowPlaceRoomIndex = index;
              return true
            }
          })
          if(!isExistDragRoom) { //最外部移到到数据中心
            let nowDragRackIndex = 0;
            this.topologyData.some((item, index) => {
              if(this.currentPlaceRack.name === item.name) {
                nowDragRackIndex = index;
                return true
              }
            })
            this.topologyData.splice(nowDragRackIndex, 1);
          }else {
            this.topologyData[nowDragRoomIndex].children.splice(nowDragRackIndex, 1);
          }
          this.topologyData[nowPlaceDataCenterIndex].children[nowPlaceRoomIndex].children.push(this.currentPlaceRack);
        }else if(type === "out-dc-and-room") {
          this.topologyData[nowDragRoomIndex].children.splice(nowDragRackIndex, 1);
          this.topologyData.push(this.currentPlaceRack);
        }else if(type === "out-dc-room") {
          let nowDragRackIndex = 0;
          let nowPlaceRoomIndex = 0;
          this.topologyData.some((item, index) => {
            if(this.nowPlacementRoom.textContent.indexOf(item.name) !== -1) {
              nowPlaceRoomIndex = index;
              return true
            }
          })
          this.topologyData.some((item, index) => {
            if(this.currentPlaceRack.name === item.name) {
              nowDragRackIndex = index;
              return true
            }
          })
          this.topologyData[nowPlaceRoomIndex].children.push(this.currentPlaceRack);
          this.topologyData.splice(nowDragRackIndex, 1);
        }
      }
    },

    // 机房开始拖拽事件
    roomDragStart(room, e) {
      console.log('room', e)
      if(e.target._prevClass == 'rack-container' || e.target._prevClass == 'machine') {
        return
      }
      this.currentTool = 'machine-room';
      this.currentPlaceRoom = room;
      this.nowDragDataCenterDom = this.getNowDataCenter(e.target);
      this.nowDragRoomDom = this.getNowRoom(e.target);
    },
  },
}
</script>
<style scoped>
  .net-plan-box {
    display: flex;
    box-shadow: 0 0 3px rgb(0 0 0 / 10%);
    border-radius: 3px;
    box-sizing: content-box;
    height: 100%;
    margin: 0 10px;
  }
  .left-tool-bar {
    padding: 15px;
    background-color: #fff;
    border-radius: 3px 0 0 3px;
    margin-right: 1px;
  }
  .tool-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 60px;
    height: 60px;
    background-color: var(--mainGreyColor);
    box-shadow: 0 1px 1px 0 rgb(26 32 62 / 14%), 0 1px 3px 0 rgb(26 32 62 / 12%), 0 1px 1px -1px rgb(26 32 62 / 10%);
    border-radius: 3px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
  }
  .tool-box:hover {
    color: var(--themeColor);
    border: 1px solid var(--themeColor);
    box-shadow: 0 4px 5px 1px rgb(26 32 62 / 7%), 0 2px 5px 1px rgb(26 32 62 / 6%), 0 2px 2px -1px rgb(26 32 62 / 10%);
  }
  .tool-name {
    margin-top: 3px;
  }
  .center-graph {
    width: 70%;
    box-shadow: 0 0 3px rgb(0 0 0 / 10%);
  }
  .drop-area {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    height: calc(100vh - 285px);
    border-bottom: 2px solid #fff;
    padding: 16px 0 8px 8px;
    background-color: #fff;
    overflow: hidden;
  }
  .drop-area:hover {
    overflow: auto;
  }
  .node-list-box {
    border-top: 1px solid var(--mainGreyColor);
    background-color: #fff;
    padding: 12px 20px;
    min-height: 91px;
  }
  .node-box {
    width: 150px;
    border: 1px solid #ddd;
    border-radius: 2px;
    background-color: #fff;
    font-size: 12px;
    cursor: pointer;
    float: left;
    margin: 5px 4px;
  }
  .node-box:hover {
    border: 1px solid #999;
  }
  .node-box p ,
  .machine p{
    margin: 3px 16px;
    color: #a2a3a9;
  }
  .node-ip {
    max-width: 150px;
    color: #3f3f44;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
  }
  .right-info-bar {
    flex: 1 1;
    background-color: #fff;
    border-radius: 0 3px 3px 0;
    padding: 13px 20px;
    box-shadow: 0 0 2px rgb(0 0 0 / 10%);
    margin: 0 -1px 0 1px;
  }
  .right-info-bar h4 {
    text-align: left;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--mainGreyColor);
    height: 27px;
    font-size: 14px;
    color: #333;
  }
  .dash-data-center-box {
    /* width: 100%; */
    min-height: 254px;
    margin: 10px 16px 10px 8px;
    background-color: #fff;
    border-radius: 4px;
    border-style: dashed;
    border-color: #ddd;
  }
  .data-center-box {
    /* width: 100%; */
    min-height: 254px;
    /* margin-left: 8px;
    margin-right: 16px; */
    margin: 10px 16px 10px 8px;
    white-space: nowrap;
    background-color: var(--mainGreyColor);
    border-radius: 4px;
  }
  .panel-head {
    /* display: none; */
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    color: #333;
    font-size: 14px;
    position: relative;
    line-height: 28px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: var(--mainGreyColor);
  }
  .panel-head-title {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 50px);
  }
  .operate-icon {
    cursor: pointer;
    color: var(--themeColor);
    margin-left: 10px;
    font-size: 14px;
    visibility: hidden;
  }
  .data-center-name-input {
    /* display: inline-block; */
    display: none;
    padding: 8px 16px;
  }
  .data-center-name-input > .ant-input-affix-wrapper {
    display: inline-block;
    width: 186px;
  }
  .input-operate-icon {
    font-size: 20px;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 5px;
  }
  .theme-color {
    color: var(--themeColor);
  }
  .panel-body {
    display: flex;
    flex-wrap: wrap;
    padding: 8px 0 0 8px;
  }
  .rack-container > .rack > .panel-body  {
    flex-direction: row !important;
    padding: 0 6px 3px!important;
  }
  /* .rack-container .panel-body {
    padding: 0 6px 3px !important;
  } */
  /* .panel-body:after, 
  .panel-body:before {
    display: table;
    content: " ";
  }
  .panel-body:after {
    clear: both;
  } */
  .rack .panel-body {
    padding: 0 6px 3px;
  }
  .room-container {
    min-width: 180px;
  }
  .room-container,
  .rack-container {
    display: inline-block;
    /* min-width: 180px; */
    margin-left: 8px;
    margin-right: 16px;
  }
  .rack-container {
    vertical-align: top;
  }
  .dashed-room,
  .dashed-dark-room {
    min-height: 169px;
    margin-bottom: 16px;
    border-radius: 4px;
    border: 2px dashed #fff;
    background-color: transparent;
  }
  .dashed-dark-room {
    border: 2px dashed #e6e6e6;
  }
  .room {
    min-height: 169px;
    margin-bottom: 16px;
    border-radius: 4px;
    background-color: #fff;
  }
  .room > .panel-head {
    background-color: #fff;
    max-width: 100%;
  }
  .room .data-center-name-input > .ant-input-affix-wrapper {
    display: inline-block;
    width: 90px;
  }
  .dashed-rack {
    min-width: 148px;
    min-height: 105px;
    border-radius: 3px;
    margin-right: 8px;
    margin-bottom: 16px;
    background-color: transparent;
    box-shadow: none;
    border: 2px dashed #e6e6e6;
  }
  .rack {
    min-width: 148px;
    max-width: 170px;
    min-height: 105px;
    border-radius: 3px;
    margin-right: 8px;
    margin-bottom: 16px;
    background-color: var(--mainGreyColor);
    box-shadow: none;
    border: 1px solid #e6e6e6;
  }
  .dashed-machine {
    width: 150px;
    min-height: 49px;
    border: 2px dashed #fff;
    margin: 0 0 5px;
    border-radius: 2px;
  }
  .machine {
    width: 150px;
    border: 1px solid rgba(0,0,0,0);
    margin: 0 0 5px;
    border-radius: 2px;
    background-color: #fff;
    font-size: 12px;
    cursor: pointer;
  }
  .machine:hover {
    border: 1px solid var(--themeColor);
  }
  .data-center-box-selected,
  .room-box-selected,
  .rack-box-selected,
  .machine-box-selected {
    border: 1px solid var(--themeColor);
  }
  .clearfix {
    width: 100%;
  }
  .clearfix:after, .clearfix:before {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }
</style>

<!-- drop2(e) {
  console.log('drop', e)
  e.preventDefault();
  // let data = document.getElementById(e.dataTransfer.getData("Text"));
  // let newDom = data.cloneNode(true);
  // e.target.appendChild(newDom);
  //定义数据中心盒子
  const dataCenterDom = document.createElement('div');
  const dataCenterTitleDom = document.createElement('div');
  //定义数据中心的标题
  const dataCenterNameSpan = document.createElement('span');
  //定义数据中心标题操作按钮
  const dataCenterOperateSpan = document.createElement('span');
  const dataCenterName = document.createTextNode('新建数据中心');
  dataCenterNameSpan.setAttribute('title', '新建数据中心');
  dataCenterNameSpan.appendChild(dataCenterName);
 

  //定义操作按钮
  const editBtnDom = document.createElement('i');
  const delBtnDom = document.createElement('i');
  editBtnDom.className = 'icon icon-edit16f operate-icon';
  delBtnDom.className = 'icon icon-delete16f operate-icon';
  editBtnDom.addEventListener('click', (e) => this.editDataCenterName('aaa', e));
  delBtnDom.addEventListener('click', (e) => this.deleteBox(dataCenterDom, e));

  dataCenterTitleDom.className = 'panel-head';
  dataCenterTitleDom.appendChild(dataCenterNameSpan);
  dataCenterOperateSpan.appendChild(editBtnDom);
  dataCenterOperateSpan.appendChild(delBtnDom);
  dataCenterTitleDom.appendChild(dataCenterOperateSpan);
  dataCenterTitleDom.addEventListener('mouseenter', (e) => this.mouseEnterTitle(editBtnDom, delBtnDom, e));
  dataCenterTitleDom.addEventListener('mouseleave', (e) => this.mouseLeaveTitle(editBtnDom, delBtnDom, e));

  dataCenterDom.className = 'data-center-box';
  dataCenterDom.appendChild(dataCenterTitleDom);
  dataCenterDom.addEventListener('click', (e) => this.selectDataCenter(dataCenterDom, e))
  e.target.appendChild(dataCenterDom);
}, -->


<!-- // 编辑数据中心的名字
    // editDataCenterName(value, e) {
    //   console.log('点击编辑', value, e)
    // },

    // 删除数据中心
    // deleteBox(delDom, e) {
    //   document.querySelector('.drop-area').removeChild(delDom);
    // },
    // 鼠标经过数据中心标题
    // mouseEnterTitle(editBtnDom, delBtnDom) {
    //   editBtnDom.target.style.visibility = 'visible';
    //   delBtnDom.style.visibility = 'visible';
    // },
    //鼠标离开数据中心标题
    // mouseLeaveTitle(editBtnDom, delBtnDom) {
    //   editBtnDom.style.visibility = 'hidden';
    //   delBtnDom.style.visibility = 'hidden';
    // },

    // selectDataCenter(nowDataCenterDom, e) {
      //   console.log('sssss')
      //   e.stopPropagation();
      //   nowDataCenterDom.classList.add('data-center-box-selected');
      // }, -->